<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='app'>0</div>
    <script>
        let obj = {}
        obj.name = 'haha'

        let age = 20

        Object.defineProperty(obj, 'age', {
            // value:20 //默认值  不能和get(),set()方法同时使用！

            //拦截属性读取
            get() {
                console.log('get方法')
                return age + '岁' //这里读取了外面的全局age
            },
            //拦截属性的写入 (修改，赋值)
            set(val) {
                console.log('set方法,传入参数是' + val)
                if (val > 30) {
                    val = 30
                }
                age = val //这里修改外面的全局age

                //模拟vue  当对象数据改变后，页面数据跟着改变
                document.getElementById('app').innerHTML = age
            }
        })

        console.log(obj.age) //首次读取，触发get方法  age还是初始20
        obj.age = 100 // 触发set方法 age变成30
        console.log(obj.age) //再次读取 触发get方法拿到age是30
    </script>
</body>

</html>